<!DOCTYPE html>
<html>
<head>
<title>MyHome</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="刘基定liujd" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/swipebox.css">
<!--左滑样式-->
<link rel="stylesheet" href="css/luara.left.css"/>
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<!--Luara js文件-->
<script src="js/jquery.luara.0.0.1.min.js"></script>
<!-- //js -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link style="display : block" rel="shortcut icon" href="http://www.liujd.cn/favicon.ico" type="image/x-icon" >
</head>
	
<body>
	<div class="banner_body">
		<div class="container">
			<div class="w3ls_logo_nav">
				<div class="w3ls_logo_nav_right">
					<div class="sap_tabs">
						<div class="w3ls_logo_nav_left">
							<h1><a href="index.html">  Liu JD</a></h1>
						</div>
			<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
				<div class="resp-tabs-container">
					
					<ul class="resp-tabs-list">
						<li class="resp-tab-item" aria-controls="tab_item-1" id="tab_item-1">主页</li>
						<li class="resp-tab-item" aria-controls="tab_item-2" id="tab_item-2">关于我</li>
						<li class="resp-tab-item" aria-controls="tab_item-3" id="tab_item-3">项目成果</li>
						<li class="resp-tab-item" aria-controls="tab_item-4" id="tab_item-4">我的博客</li>
						<li class="resp-tab-item" aria-controls="tab_item-5" id="tab_item-5">联系我</li>
					</ul>
					<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
					
	<!-- home -->				
				<!--Luara图片切换骨架begin-->
    <div class="example2">
        <ul>
            <li><img src="images/h1.jpg" alt="1"/></li>
             <li><img src="images/h2.jpg" alt="1"/></li>
             <li><img src="images/h3.jpg" alt="1"/></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--Luara图片切换骨架end-->
    <script>
        $(function(){
            <!--调用Luara示例--500 334>
            $(".example2").luara({width:"1100",height:"490",interval:3500,selected:"seleted",deriction:"left"});

        });
    </script>		
	<!-- //home -->
					</div>
					<div class="tab-2 resp-tab-content" aria-labelledby="tab_item-2">
	<!-- about -->

						<div class="agile_about">
							<div class="agile_about_pos">
								<img src="images/1.png" alt=" " class="img-responsive" />
							</div>
						</div>
						<div class="agileits_agile_about">
							<h3>About Me</h3>
							<div class="col-md-6 agileits_agile_about_left">
								<p>&nbsp;&nbsp;大家好,我是刘基定,欢迎来到我的个人主页<br>
								&nbsp;&nbsp;这世界最有可能毁灭的方式大多数专家都同意是次意外。这就是为什么会有我们，我们是计算机专家，我们创造意外。很幸运能作为一名IT工作者,也很幸运能亲身感受科技给我们生活带来的便利.我爱这份事业,每敲出一行代码,成就感便会多一分。一种新技术一旦开始流行，你要么坐上压路机，要么成为铺路石,所以我应该不断努力,充实自己的技术,为了科技的发展献出自己的一份力量。
								</p>
							</div>
							<div class="col-md-6 agileits_agile_about_right">
								<p>&nbsp;&nbsp;&nbsp;&nbsp;Hi, I'm Liu Jiding. Welcome to my homepage.The most likely way for the world to be destroyed, most experts agree, is by accident. That’s where we come in; we’re computer professionals. We cause accidents.I am very lucky to be a programmer and I am very lucky to feel a lot of convenience brought by science and technology to our life.I love this occupation, each with a line of code, will be a little more sense of achievement.A new technology once became popular, you either sit on rollers, or a paving stone.So I should try my best to enrich my skills and give my strength for the development of science and technology.</p>
							</div>
							<div class="clearfix"> </div>
							<div class="agileits_skills_grids">
								<div class="col-md-6 agileits_skills_grid">
									<div class="skills">
										<div class="skill1" style="width:90%"> </div>		
										<div class="bar">
											<p>java</p>
										</div>
									</div>
									<div class="skills skills1">
										<div class="skill3" style="width:80%"> </div>							
										<div class="bar">
											<p>oracle</p>
										</div>
									</div>
									<div class="skills skills2">
										<div class="skill4" style="width:85%"> </div>							
										<div class="bar">
											<p>springMVC</p>
										</div>
									</div>
								</div>
								<div class="col-md-6 agileits_skills_grid">
									<div class="skills">
										<div class="skill1" style="width:80%"> </div>		
										<div class="bar">
											<p>javaScript</p>
										</div>
									</div>
									<div class="skills skills2">
										<div class="skill4" style="width:85%"> </div>							
										<div class="bar">
											<p>spring</p>
										</div>
									</div>
									<div class="skills skills3">
										<div class="skill5" style="width:88%"> </div>							
										<div class="bar">
											<p>mybatis</p>
										</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
	<!-- //about -->
					</div>
					<div class="tab-3 resp-tab-content" aria-labelledby="tab_item-3">
	<!-- work -->
						<div class="agile_about">
							<div class="agile_about_pos">
								<img src="images/1.png" alt=" " class="img-responsive" />
							</div>
						</div>
						<div class="agileits_agile_about">
							<h3>My Work</h3>
							<div class="agileits_agile_about_blog">
								<div class="col-md-6 agileits_agile_about_blog_left">
									<div class="agile_about_blog_left_grid">
										<a href="#" data-toggle="modal" data-target="#myModal1"><img src="images/x1.jpg" alt=" " class="img-responsive" /></a>
										<div class="agile_about_blog_left_grid_pos">
											<ul>
												<li>18</li>
												<li>2017年2月</li>
											</ul>
										</div>
									</div>
								<div class="agile_about_blog_right_grid_list">
											<ul>
											<li style="font-size:12px"><span style="font-size:16px" class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>点击以上图片了解详情</li>
											</ul>
										</div>
								</div>
								<div class="col-md-6 agileits_agile_about_blog_right">
									<div class="agile_about_blog_right_grid">
										<div class="agile_model">
											<a href="#" data-toggle="modal" data-target="#myModal1">xxx公司信息管理系统</a>
										</div>
									
										<p>信息管理系统有利于公司信息管理以及新闻发布,管理员可以通过后台管理添加栏目以及新闻,然后在前台动态显示</p>
											<div class="agile_about_blog_right_grid_list">
											
										</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
							
							
							<div class="modal video-modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal1">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											xxx公司信息管理系统
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
										</div>
										<section>
											<div class="modal-body">
												<img src="images/x11.jpg" alt=" " class="img-responsive" />
												<p><span class="glyphicon glyphicon-home" style="color:#23D6E7;"aria-hidden="true"></span>信息管理系统是为了展示公司的新闻而设计的.公司管理员可以在后台添加栏目,以及在栏目下添加文章,在后台添加完毕后,就会动态添加到前台,用户只需要打开前台就可以看到文章和栏目.这样就实现了公司对信息的即时添加以及用户可以即时阅读到公司动态<br><span class="glyphicon glyphicon-home" style="color:#23D6E7;"aria-hidden="true"></span>在这个系统中,我负责以下几个模块:<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" style="color:#66CCFF;"aria-hidden="true"></span>
												栏目添加以及栏目发布:实现管理员在后台添加栏目以及发布一个新的栏目<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" aria-hidden="true" style="color:#66CCFF;"></span>
												信息添加以及信息发布:实现管理员在后台添加信息以及发布一个新信息<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" style="color:#66CCFF;"aria-hidden="true"></span>
												前台管理:动态加载管理员添加的栏目以及信息,让用户可以看到<br><span class="glyphicon glyphicon-home" style="color:#23D6E7;" aria-hidden="true"></span>
												所用技术:tomcat服务器,Oracle数据库,ssm框架,ajax等
												</i></p>
											</div>
										</section>
									</div>
								</div>
							</div>

							<div class="agileits_agile_about_blog">
								<div class="col-md-6 agileits_agile_about_blog_left">
									<div class="agile_about_blog_left_grid">
										<a href="#" data-toggle="modal" data-target="#myModal2"><img src="images/x2.jpg" alt=" " class="img-responsive" /></a>
										<div class="agile_about_blog_left_grid_pos">
											<ul>
												<li>11</li>
												<li>2016年11月</li>
											</ul>
										</div>
									</div>
								<div class="agile_about_blog_right_grid_list" style="font-size:10px">
											<ul>
											<li style="font-size:12px"><span style="font-size:16px" class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>点击以上图片了解详情</li>
											</ul>
										</div>
								</div>
								<div class="col-md-6 agileits_agile_about_blog_right">
									<div class="agile_about_blog_right_grid">
										<div class="agile_model">
											<a href="#" data-toggle="modal" data-target="#myModal2">跑步社区</a>
										</div>
									
										<p>RunCommunity是某公司为了给那些爱好跑步的人提供一个网上交流的平台,以服务广大跑步和运动网友为主.</p>
											<div class="agile_about_blog_right_grid_list">
											
										</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
							
							
							<div class="modal video-modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											跑步社区
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
										</div>
										<section>
											<div class="modal-body">
												<img src="images/x22.jpg" alt=" " class="img-responsive" />
												<p><span class="glyphicon glyphicon-home" style="color:#23D6E7;"aria-hidden="true"></span>跑步社区站点（RunCommunity）
												此站点是某公司为了给那些爱好跑步的人提供一个网上交流的平台，在网上提供现实论坛所需的各种交流手段，以服务广大跑步和运动网友为主，强调互动性、知识性、趣味性，是结交跑友，了解跑步信息，享受虚拟跑步运动的好去处。<br><span class="glyphicon glyphicon-home" style="color:#23D6E7;"aria-hidden="true"></span>在这个系统中,我负责以下几个模块:<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" style="color:#66CCFF;"aria-hidden="true"></span>
												用户管理:该模块包括用户注册,登录以及修改密码,修改个人信息<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" aria-hidden="true" style="color:#66CCFF;"></span>
												信箱模块:该模块包括新建短信,显示已接受短信和已发送短信,以及对短信的查看删除功能<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record" style="color:#66CCFF;"aria-hidden="true"></span>
												好友模块:该模块包括好友速配和按条件查找好友,显示好友和黑名单,以及对好友黑名单的删除操作<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-record"style="color:#66CCFF;" aria-hidden="true"></span>
												个性空间:包括创建,修改,查看个性空间<br><span class="glyphicon glyphicon-home" style="color:#23D6E7;" aria-hidden="true"></span>
												所用技术:tomcat服务器,Oracle数据库,ssm框架,js,jsp等
												</i></p>
											</div>
										</section>
									</div>
								</div>
							</div>
	<!-- //work -->
						</div>
					</div>
					<div class="tab-4 resp-tab-content" aria-labelledby="tab_item-4">
	<!-- blog -->
						<div class="agile_about">
							<div class="agile_about_pos">
								<img src="images/1.png" alt=" " class="img-responsive" />
							</div>
						</div>
						<div class="agileits_agile_about">
							<h3>Blog</h3>
							<div class="agileits_agile_about_blog">
								<div class="col-md-6 agileits_agile_about_blog_left">
									<div class="agile_about_blog_left_grid">
										<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/8.jpg" alt=" " class="img-responsive" /></a>
										<div class="agile_about_blog_left_grid_pos">
											<ul>
												<li>15</li>
												<li>2017年4月</li>
											</ul>
										</div>
									</div>
								<div class="agile_about_blog_right_grid_list">
											<ul>
											
												<li style="font-size:12px"><span style="font-size:16px" class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>点击以上图片查看更多</li>
											</ul>
										</div>
								</div>
								<div class="col-md-6 agileits_agile_about_blog_right">
									<div class="agile_about_blog_right_grid">
										<div class="agile_model">
											<a href="#" data-toggle="modal" data-target="#myModal">我的CSDN博客</a>
										</div>
									
										<p>CSDN是中国最大的开发者服务平台以及全球最大的中文IT技术社区。加入CSDN,一方面是为了学到更多技术,另一方面希望通过我分享的文章帮助到初学技术的人。</p>
											<div class="agile_about_blog_right_grid_list">
											<ul>
											
												<li><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span><a href="http://blog.csdn.net/liujiding">进入我的博客主页</a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
							
							
							<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											我的CSDN博客
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
										</div>
										<section>
											<div class="modal-body">
												<img src="images/88.jpg" alt=" " class="img-responsive" />
												<p>加入CSDN有一段时间了,以前只是看博客,发现里面有很多技术大牛分享的东西,确实学习到了很多的技术知识;最近就有了分享自己的技术的心情,所以就着手写自己的博客,希望能帮助到初学者.当然,这对我其实也是一种帮助.其实,写博客的目的无非就是以下几点:</br>
												<span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#66CCFF;"></span> 
												&nbsp; 学习新知识，完善自我体系</br>
												<span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#66CCFF;"></span> 
												&nbsp; 提升沟通能力、表达能力以及自信心</br>
												<span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#66CCFF;"></span> 
												&nbsp; 有效提升工程师在专业领域的经验</br>
												<span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#66CCFF;"> </span> 
												&nbsp; 帮助工程师解决最常见问题—</br>
												</i></p>
											</div>
										</section>
									</div>
								</div>
							</div>
						</div>
	<!-- //blog -->
					</div>
					<div class="tab-5 resp-tab-content" aria-labelledby="tab_item-5">
	<!-- contact -->
						<div class="agile_about">
							<div class="agile_about_pos">
								<img src="images/1.png" alt=" " class="img-responsive" />
							</div>
						</div>
						<div class="agileits_agile_about">
							<h3>Contact Me</h3>
							<div class="agileits_agile_about_mail">
								<div id="qq" style="width:200px;float:left;">
									<img src="images/qq.jpg"><br>
									&nbsp;
									<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=782246420&site=qq&menu=yes"><img border="0" src="images/qqq.gif" alt="111" title="111"/></a>
								</div>
								<div id="wx" style="width:200px;float:left;">
									<img src="images/wx.png"><br>
									<span style="font-size:16px;color:red; class="glyphicon glyphicon-hand-up" aria-hidden="true">扫一扫加微信</span>
								</div>
								<div id="cl" style="clear:both"></div> 
							</div>
						</div>
						
						<div class="w3agile_map">
							<!---<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2564.958900464012!2d36.23097800000001!3d49.993379999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4127a0f009ab9f07%3A0xa21e10f67fa29ce!2sGeorgia+Education+Center!5e0!3m2!1sen!2sin!4v1436943860334" style="border:0"></iframe>--->
							<div class="agileinfo_map_color">
								<div class="agileinfo_map_color_grid">
									<div class="col-md-4 agileinfo_map_color_grid_left">
										<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>Address</h4>
										<p>江苏省苏州市昆山市</p>
									</div>
									<div class="col-md-4 agileinfo_map_color_grid_left">
										<h4><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>Mail Me</h4>
										<p><a href="mailto:ljd@liujd.cn"> ljd@liujd.cn</a></p>
									</div>
									<div class="col-md-4 agileinfo_map_color_grid_left">
										<h4><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Phone</h4>
										<p>+(86) 184 7379 1786</p>
									</div>
									<div class="clearfix"> </div>
								</div>
							</div>
						</div>
					</div>
<!-- //contact -->
				</div>
			</div>
			
		</div>
		<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$('#horizontalTab').easyResponsiveTabs({
						type: 'default', //Types: default, vertical, accordion           
						width: 'auto', //auto or any width like 600px
						fit: true   // 100% fit in a container
					});
				});			
			</script>
	</div>
	<div class="clearfix"> </div>
</div>
<div class="agileits_copyright">
	<p>Copyright &copy; 2017.liujd All rights reserved.</p>
</div>
		</div>
	</div>
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>